<template>
  <div ref="echarts1" id="echarts1"></div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  name: "Echarts1",
  data() {
    return {
      data: []
    };
  },
  methods: {
    async getdata() {
      const result = await axios.get(`http://localhost:8888/one`);
      return result;
    }
  },
  mounted() {
      let myEchart = echarts.init(this.$refs.echarts1);
    //   加载数据的动画
    myEchart.showLoading();
    //  请求echarts动态数据
    this.getdata().then(res => {
        myEchart.hideLoading()
      console.log(res);
      this.data = res.data;

      let option = {
        title: {
          text: "饼状图",
          subtext: "基本设置",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "销售量",
            type: "pie",
            radius: ["40%", "70%"],
            label: {
              show: true,
              position: "inside",
              color: "yellow"
            },
            labelLine: {
              show: false
            },
            roseType: "area",
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },
            data: this.data
          }
        ]
      };
      myEchart.setOption(option);

    });
    
    /*  let data =[
        {
            "value":67,
            "name":"美食",
            "itemStyle":{
                "normal":{
                    "color":"rgb(1,175,80)"
                }
            }
        },
        {
            "value":85,
            "name":"日化",
            "itemStyle":{
                "normal":{
                    "color":"rgb(255,175,80)"
                }
            }
        },
        {
            "value":45,
            "name":"数码",
            "itemStyle":{
                "normal":{
                    "color":"rgb(1,0,80)"
                }
            }
        },
        {
            "value":98,
            "name":"家电",
            "itemStyle":{
                "normal":{
                    "color":"rgb(30,50,70)"
                }
            }
        }
    ] */
  }
};
</script>

<style scoped lang="less">
#echarts1 {
  width: 50%;
  height: 500px;
  margin: 0 auto;
  border: 1px solid #f00;
}
</style>
